<script lang="js" setup name="SeriesItem">
import { ref, reactive, computed, onMounted } from "vue";
import { desensitizeSubstring, IsPhone, IsPC } from "../utils";
import { useAppStore } from "../stores/appStore";

const emit = defineEmits(["selected", "dblclick"]);
const appStore = useAppStore();
const IsSel = ref(false);
const imgSrc = ref(null);

const props = defineProps({
    series: {
        type: Object,
        required: true
    },
    pos: {
        type: Number,
        required: true,
    },
});

const thumbId = computed(() => {
    return "thumb-" + props.series.seriesInsUid;
});


const seriesTitle = computed(() => {
    let patName = props.series.study.patientName;
    if (config.desensitize) {
        patName = desensitizeSubstring(patName, 1, -1);
    }
    return (
        props.series.study.modality +
        " - " +
        props.series.seriesNumber +
        " " +
        patName
    );
});

// const imgSrc = computed(async () => {
//     const png = await props.series.GetThumb();
//     return new URL(png, import.meta.url).href;
// });

const thumbClass = computed(() => {
    let ss = IsPhone()
				? "thumbnail-phone"
				: appStore.navbarPos === "left"
				? "thumbnail"
				: "thumbnail-phone";
    let s = "unselect";
    if (IsSel.value) {
        s = "selected";
    }
    return ss + " " + s;
});

const tipPlacement = computed(() => {
    // return appStore.navbarPos === "left" ? "rightTop" : "topLeft";
    return appStore.navbarPos === "left" ? "right" : "top";
});

const showTooltip = computed(() => {
    return IsPhone();
    // return false;
});

const canDrag = computed(() => {
    return IsPC();
});

const dragEnter = (e, data) => {
    // console.log('drag enter', data);
    e.dataTransfer.setData("seriesInsUid", data);
};

const dragEnd = (e) => {
    // console.log('drag end');
    e.dataTransfer.clearData();
};

const onClick = (e) => {
    emit("selected", { pos: props.pos });
}

const onDblClick = (e) => {
    emit("dblclick", { pos: props.pos });
};

const showMenu = (e) => {
};

const setSelected = (bSel) => {
    IsSel.value = bSel;
};

defineExpose({
    setSelected,
});

onMounted(() => {
    props.series.GetThumb().then((png) => {
        // console.log("imgSrc:", uri);
        imgSrc.value = new URL(png, import.meta.url).href;
    });

});
</script>

<template>
	<div
		:class="thumbClass"
		:draggable="canDrag"
		:id="thumbId"
		@dragstart="dragEnter($event, series.seriesInsUid)"
		@dragend="dragEnd"
		@click="onClick"
		@dblclick="onDblClick"
		@contextmenu.prevent="showMenu"
	>
		<h3 class="thumb-title">{{ seriesTitle }}</h3>
		<div class="img-container">
			<img class="img-contain" :src="imgSrc" alt="" draggable="false" />
		</div>
		<p class="serdesc">{{ series.seriesDesc }}</p>
		<p class="serdate">{{ series.seriesDate }}</p>
		<p class="sertime">{{ series.seriesTime }}</p>
		<p class="imgcnt">{{ series.GetCount() }}</p>
		<progress ref="pg" value="0" max="1"></progress>
	</div>
</template>

<style lang="scss" scoped>
.thumbnail,
.thumbnail-phone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: var(--color-study-bg);
	border-radius: 4px;
	border-top: 1px solid var(--color-border-lt);
	border-left: 1px solid var(--color-border-lt);
	border-right: 2px groove var(--color-border-rb);
	border-bottom: 2px groove var(--color-border-rb);
	flex-shrink: 0;
}

.thumbnail {
	width: 100%;
	aspect-ratio: 4/3;
}

.thumbnail-phone {
	height: 100%;
	aspect-ratio: 4/3;
}

.thumb-title {
	height: 2rem;
	font-weight: normal;
}

h3 {
	cursor: default;
	font-size: 1.4rem;
	margin: 0;
}

progress {
	width: 98%;
	height: 0.4rem;
	background-color: lightskyblue;
	margin-top: 1px;
	margin-bottom: 1px;
	left: 1%;
	border-radius: 2px;
	flex-shrink: 0;
}

progress::-moz-progress-bar {
	background-color: rgb(255, 255, 255);
	border-radius: 2px;
}
progress::-webkit-progress-bar {
	background-color: rgb(255, 255, 255);
	border-radius: 2px;
}
progress::-moz-progress-value {
	background-color: #4e8ae2;
	border-radius: 2px;
}

progress::-webkit-progress-value {
	background-color: #4e8ae2;
	border-radius: 2px;
}

.tooltip-thumb {
	font-size: 1.6rem;
	// font-size: 20px;
}

p {
	position: absolute;
	color: #12e08a;
	font-size: 1.25rem;
	// color: #eee;
	// mix-blend-mode: difference;

	&.serdesc {
		// color: #DFDFDF;
		width: 100%;
		text-align: left;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		left: 0.2rem;
		top: 2rem;
	}
	&.serdate {
		// position: absolute;
		// color: #DFDFDF;
		left: 2px;
		top: 3.9rem;
	}
	&.sertime {
		// position: absolute;
		// color: #DFDFDF;
		left: 0.2rem;
		top: 5.7rem;
	}

	&.imgcnt {
		// position: absolute;
		// color: #DFDFDF;
		right: 0.6rem;
		bottom: 0.6rem;
	}
}

.img-container {
	display: flex;
	background-color: black;
	width: 100%;
	height: 7.5rem;
	align-items: center;
	justify-content: center;
	flex: 1;
}

img {
	width: auto;
	height: 90%;
}

.selected {
	background-color: var(--color-study-active);
	color: var(--color-selected-text);
}

.unselect {
	background-color: var(--color-study-bg);
	color: var(--color-unselect-text);
}
</style>
